@font-face {
    font-family: 'WenYue';
    src: url('../font/WenYue.otf');
}

.cont3d {
    position: relative;
    /*兼容ie7*/
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.cont3d .cont3dlist {
    -moz-column-count: 4;
    /* Firefox */
    -webkit-column-count: 4;
    /* Safari 和 Chrome */
    column-count: 4;
    column-gap: 0;
    width: 100vw;
    list-style: none;
    display: block;
    float: left;

}

.cont3d .cont3dlist .Item3d {
    break-inside: avoid;
    /* overflow: hidden; */

}

.cont3d .cont3dlist .Item3d .item {
    position: relative;
    text-align: center;
    break-inside: avoid;
    font-size: 2.083vw;
    transform: scale(0.9);
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: column;


}

.cont3d .cont3dlist .Item3d .item span {
    white-space: nowrap;
    font-family: 'WenYue';
}

.cont3d .cont3dlist .Item3d .item img {

    vertical-align: middle;
    margin: 0 auto;
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); /* Firefox 4 */
    -webkit-transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); /* Safari 和 Chrome */
    -o-transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); /* Opera */
    max-width: 80%;
}

.cont3d .cont3dlist .Item3d .item:hover {
    transform: scale(1);
    -moz-transition: scale(1);
    -webkit-transition: scale(1);
    -o-transition: scale(1);
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); /* Firefox 4 */
    -webkit-transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); /* Safari 和 Chrome */
    -o-transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); /* Opera */
}

/* 大标题 */
.bigTitle {
    width: 26.875vw;
    height: 8.125vw;
    position: fixed;
    left: 37.41vw;
    top: 20vw;
    z-index: 1;
}

.bigTitle img {
    width: 100%;
    height: auto;
    z-index: 1;
}

.allExhibits {
    z-index: 1;
    right: 5vw;
    bottom: 5vw;
    position: fixed;
}

.allExhibits button {
    width: 6vw;
    height: 6vw;
    border-radius: 50%;
    font-size: 20px;
}

/* logo */
.logo {
    width: 25vw;
    height: 5vw;
    position: fixed;
    left: 5vw;
    top: 5vw;
    z-index: 1;
}

.logo img {
    width: 100%;
    height: auto;
    z-index: 1;
}

/* 缩放位移 */
.scale1 {
    width: 12vw;
    margin-left: 0;
    margin-top: 5vw;
}

.scale2 {
    width: 24vw;

}

.scale3 {
    width: 14vw;
    margin-left: 6vw;
    margin-top: 14vw;
}

.scale4 {
    width: 20vw;
    margin-left: 4vw;
    margin-top: 5vw;
}

.scale5 {
    width: 10vw;
    margin-left: 0vw;
    margin-top: 1vw;
}

.scale6 {
    width: 24vw;
    margin-left: 4vw;
    margin-top: 9vw;
}

.scale7 {
    width: 12vw;
    margin-left: 4vw;
    margin-top: 0vw;
}

.tosmall {
    animation: tosmall 1s infinite;
    -webkit-animation: tosmall 1s infinite;
}

.tobigsm {
    animation: tobigsm 2s infinite;
    -webkit-animation: tobigsm 2s infinite;
}

@keyframes tobigsm {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(0);
    }

    100% {

        transform: scale(0.9);
    }
}

@-moz-keyframes tobigsm /* Firefox */
{
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(0);
    }

    100% {

        transform: scale(0.9);
    }
}

@-webkit-keyframes tobigsm /* Safari 和 Chrome */
{
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(0);
    }

    100% {

        transform: scale(0.9);
    }
}

@-o-keyframes tobigsm /* Opera */
{
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(0);
    }

    100% {

        transform: scale(0.9);
    }
}

.all-button:hover {
    cursor: pointer;
}

@media screen and (max-width: 1081px) {
    /*标题*/
    .bigTitle {
        width: 66vw;
        left: 17vw;
        top: 78vw;
        height: 20vw;
    }

    .logo {
        width: 50vw;
        height: 10vw;
        position: fixed;
        left: 3vw;
        top: 4vw;
    }

    .cont3d .cont3dlist {
        -moz-column-count: 3; /* Firefox */
        -webkit-column-count: 3; /* Safari 和 Chrome */
        column-count: 3;
        column-gap: 0;
    }

    .erWeiMa {
        width: 3rem;
        height: 3rem;
    }

    .allExhibits {
        z-index: 1;
        right: 5vw;
        bottom: 5vw;
        position: fixed;
    }

    .allExhibits button {
        width: 20vw;
        height: 20vw;
        border-radius: 50%;
        font-size: 12px;
    }

    .home-exhibit-name {
        display: inline-block;
        max-width: 15em;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

}